<template>
  <div
    style="
      background-color: #e8e8e8;
      height: 100%;
      width: 100%;
      padding: 0 30px;
    "
    v-if="num"
  >
    <div style="display: flex; margin-top: 40px" class="上半">
      <div style="margin-top: 10px; width: 40%">
        <div
          style="
            display: flex;
            justify-self: auto;
            padding: 5px 30px;
            margin-bottom: 30px;
            background-color: white;
          "
        >
          <div
            style="width: 6px; background-color: aqua; border: 1px solid aqua"
          ></div>
          <div style="margin-left: 10px">近七天订单量</div>
          <div
            style="
              background-color: aquamarine;
              font-size: small;
              margin-top: 3px;
              margin-left: 200px;
            "
          >
            更新至2024.12.15
          </div>
        </div>
        <div
          style="width: 100%; height: 5px; border: 1px solid antiquewhite"
        ></div>
        <div
          ref="chartDom"
          style="
            width: 100%;
            height: 250px;
            margin-top: -30px;
            padding-left: 30px;
            background-color: white;
          "
        ></div>
      </div>
      <div style="margin-top: 10px; width: 40%; margin-left: 20px">
        <div
          style="
            display: flex;
            justify-self: auto;
            padding: 5px 10px;
            margin-bottom: 30px;
            background-color: white;
          "
        >
          <div
            style="width: 6px; background-color: aqua; border: 1px solid aqua"
          ></div>
          <div style="margin-left: 10px">近七天收入</div>
        </div>
        <div
          style="width: 100%; height: 5px; border: 1px solid antiquewhite"
        ></div>
        <div
          ref="chartDom1"
          style="
            width: 100%;
            height: 250px;
            margin-top: -30px;
            padding-left: 30px;
            background-color: white;
          "
        ></div>
      </div>
      <div
        class="图表之外(上半)"
        style="width: 18%; margin-left: 10px; margin-top: 10px"
      >
        <div
          class="未收款"
          style="
            width: 100%;
            height: 88px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            padding: 8px 8px;
            border-radius: 5%;
          "
          @click="goToOrder()"
        >
          <div style="margin-left: 10px">
            <p style="margin-bottom: 2px">未收款</p>
            <h1 style="color: orange; margin-top: 0; margin-left: 8px">
              {{ ynmoneyData }}
            </h1>
          </div>
          <img
            src="/src/static/未收款.png"
            alt="网络似乎出了点问题"
            style="width: 70px; height: 70px; border-radius: 15%"
          />
        </div>
        <div
          class="到期提醒"
          style="
            width: 100%;
            height: 88px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            padding: 8px 8px;
            border-radius: 5%;
            margin-top: 10px;
          "
        >
          <div style="margin-left: 10px">
            <p style="margin-bottom: 2px">到期提醒</p>
            <h1 style="color: orange; margin-top: 0; margin-left: 8px">{{endtimedate}}</h1>
          </div>
          <img
            src="/src/static/到期提醒.png"
            alt="网络似乎出了点问题"
            style="width: 70px; height: 70px; border-radius: 15%"
          />
        </div>
        <div
          class="投诉管理"
          style="
            width: 100%;
            height: 88px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            padding: 8px 8px;
            border-radius: 5%;
            margin-top: 10px;
          "
          @click="tosu"
        >
          <div style="margin-left: 10px">
            <p style="margin-bottom: 2px">投诉管理</p>
            <h1 style="color: orange; margin-top: 0; margin-left: 8px">{{ tousudata }}</h1>
          </div>
          <img
            src="/src/static/投诉管理.png"
            alt="网络似乎出了点问题"
            style="width: 70px; height: 70px; border-radius: 15%"
          />
        </div>
      </div>
    </div>
    <div class="下半" style="margin-top: 10px; background-color: white">
      <div
        class="表头"
        style="display: flex; margin-left: 30px; padding: 5px 0"
      >
        <div
          style="width: 6px; background-color: aqua; border: 1px solid aqua"
        ></div>
        <div style="margin-left: 10px">明日排单情况</div>
      </div>
      <div class="隔离条">
        <div style="height: 2px; width: 100%; border: 1px solid #e8e8e8"></div>
      </div>
      <div class="表单">
        <el-row>
          <el-col :span="13" class="左边" style="padding-right: 20px">
            <el-row>
              <div style="padding: 5px 30px">订单状态</div>
            </el-row>
            <el-row style="text-align: center">
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ ordestatusalldata }}
                </h1>
                <div style="font-size: smaller">订单总量</div>
              </el-col>
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ ordestatus1 }}
                </h1>
                <div style="font-size: smaller">已派单</div>
              </el-col>
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: red">{{ ordestatus2data }}</h1>
                <div style="font-size: smaller">未派单</div>
              </el-col>
              <el-col :span="6"> </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div
                  class="隔离条"
                  style="
                    margin-left: 20px;
                    margin-top: 15px;
                    height: 2px;
                    width: 90%;
                    border: 1px solid #e8e8e8;
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <div style="padding: 5px 30px">时间档期</div>
            </el-row>
            <el-row style="text-align: center">
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ newtommorowTime[0] }}
                </h1>
                <div style="font-size: smaller">上午8:00~10:00</div>
              </el-col>
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ newtommorowTime[1] }}
                </h1>
                <div style="font-size: smaller">上午10:30~12:30</div>
              </el-col>
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ newtommorowTime[2] }}
                </h1>
                <div style="font-size: smaller">下午2:00~4:00</div>
              </el-col>
              <el-col :span="6">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ newtommorowTime[3] }}
                </h1>
                <div style="font-size: smaller">下午4:30~6:30</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div
                  class="隔离条"
                  style="
                    margin-left: 20px;
                    margin-top: 15px;
                    height: 2px;
                    width: 90%;
                    border: 1px solid #e8e8e8;
                  "
                ></div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="9" class="右边" style="margin-left: 50px">
            <el-row>
              <div style="padding: 5px 20px">客户类型</div>
            </el-row>
            <el-row style="text-align: center">
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ viptype1s[0] }}
                </h1>
                <div style="font-size: smaller">临时订单</div>
              </el-col>
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ viptype1s[1] }}
                </h1>
                <div style="font-size: smaller">包月订单</div>
              </el-col>
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ viptype1s[2] }}
                </h1>
                <div style="font-size: smaller">包季订单</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div
                  class="隔离条"
                  style="
                    margin-left: 20px;
                    margin-top: 15px;
                    height: 2px;
                    width: 90%;
                    border: 1px solid #e8e8e8;
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <div style="padding: 5px 30px">订单来源</div>
            </el-row>
            <el-row style="text-align: center">
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ ordesourseTDate[0] }}
                </h1>
                <div style="font-size: smaller">淘宝订单</div>
              </el-col>
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ ordesourseTDate[1] }}
                </h1>
                <div style="font-size: smaller">线下订单</div>
              </el-col>
              <el-col :span="8">
                <h1 style="color: orange; margin-bottom: 5px; color: green">
                  {{ ordesourseTDate[2] }}
                </h1>
                <div style="font-size: smaller">美团订单</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div
                  class="隔离条"
                  style="
                    margin-left: 20px;
                    margin-top: 15px;
                    height: 2px;
                    width: 90%;
                    border: 1px solid #e8e8e8;
                  "
                ></div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="留白"
              style="
                margin-left: 20px;
                margin-top: 15px;
                height: 74px;
                width: 90%;
                border: 1px solid white;
              "
            ></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <div v-else><TouSu></TouSu></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import {
  listorder,
  tomorrow,
  viptype,
  ynmoney,
  ordersourceT,
  ordestatusall,
  ordestatus2,
  endtime
} from "@/api/system/shouye";
import { computed } from "vue";
import { tousu } from "../../../api/system/shouye";

const chartDom = ref(null);
const chartDom1 = ref(null);
const orderDates = ref([]);
const prices = ref([]);
const nums = ref([]);
const tomorrowOrder = ref([]);
const ynmoneyData = ref([]);
const ordestatusalldata = ref([]);
const ordestatus2data = ref([]);
const tousudata = ref([]);
const  ordestatus1 = computed(()=>{
  return ordestatusalldata.value - ordestatus2data.value;
});
const endtimedate = ref([]);
const ordesourseT1 = ref([
  { total_orders: 0, dict_label: "淘宝" },
  { total_orders: 0, dict_label: "线下" },
  { total_orders: 345, dict_label: "美团" },
]);
const viptype1 = ref([
  { total_orders: 0, dict_label: "临时" },
  { total_orders: 344, dict_label: "包季" },
  { total_orders: 1, dict_label: "包月" },
]);
const tommorowTime = ref([
  { name: "全天", total_orders: 86 },
  { name: "上午8:00-10:00", total_orders: 0 },
  { name: "上午10:30-12:30", total_orders: 258 },
  { name: "下午2:00-4:00", total_orders: 0 },
  { name: "下午4:30-6:30", total_orders: 1 },
]);
const dataList = ref([
  { order_date: "12-09", price: 105822, num: 312 },
  { order_date: "12-10", price: 92035, num: 267 },
  { order_date: "12-11", price: 116095, num: 268 },
  { order_date: "12-12", price: 44475, num: 269 },
  { order_date: "12-13", price: 96238, num: 269 },
  { order_date: "12-14", price: 95759, num: 267 },
  { order_date: "12-15", price: 95759, num: 267 },
]);

dataList.value.forEach((item) => {
  orderDates.value.push(item.order_date);
  prices.value.push(item.price);
  nums.value.push(item.num);
});

tommorowTime.value.forEach((item) => {
  tomorrowOrder.value.push(item.total_orders);
});

const viptype1s = viptype1.value.map((item) => item.total_orders);

const ordesourseTDate = ordesourseT1.value.map((item) => item.total_orders);

const keys = Object.keys(tomorrowOrder.value).slice(1);
const newtommorowTime = keys.map((key) => tomorrowOrder.value[key]);

function goToOrder() {
  window.location.href ="../../order/index.vue";
}

function a() {
  listorder().then((res) => {
    dataList.value = res;
  });
}
function b() {
  tomorrow().then((res) => {
    tommorowTime.value = res;
  });
}
function c() {
  viptype().then((res) => {
    viptype1.value = res;
  });
}
function d() {
  ynmoney().then((res) => {
    ynmoneyData.value = res;
  });
}
function e() {
  ordersourceT().then((res) => {
    ordesourseT1.value = res;
  });
}
function f() {
  ordestatusall().then((res) => {
    ordestatusalldata.value = res;
  });
}
function g() {
  ordestatus2().then((res) => {
    ordestatus2data.value = res;
  });
}
function h() {
  endtime().then((res) => {
    endtimedate.value = res;
  });
}
function i(){
  tousu().then((res) => {
  tousudata.value = res;
  });
}

function initChart() {
  const myChart = echarts.init(chartDom.value);
  const myChart1 = echarts.init(chartDom1.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
    },
    xAxis: {
      data: orderDates.value,
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: true,
        inside: false,
        lineStyle: {
          color: "#59C8E2",
        },
      },
      min: "dataMin",
      max: "dataMax",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ccc",
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: true,
        inside: false,
        lineStyle: {
          color: "#ccc",
        },
      },
      min: "0",
      max: "dataMax",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ccc",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
      borderWidth: 1,
      borderColor: "#ccc",
    },
    series: [
      {
        data: nums.value,
        type: "line",
        lineStyle: {
          width: 4,
          type: "solid",
          color: "#59C8E2",
        },
        symbol: "none",
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#59C8E2" },
            { offset: 1, color: "#FFFFFF" },
          ]),
        },
      },
    ],
  };

  const option1 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
    },
    xAxis: {
      data: orderDates.value,
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: true,
        inside: false,
        lineStyle: {
          color: "##1069C1",
        },
      },
      min: "dataMin",
      max: "dataMax",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ccc",
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: true,
        inside: false,
        lineStyle: {
          color: "#ccc",
        },
      },
      min: "0",
      max: "dataMax",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ccc",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
      borderWidth: 1,
      borderColor: "#ccc",
    },
    series: [
      {
        data: prices.value,
        type: "line",
        lineStyle: {
          width: 4,
          type: "solid",
          color: "#1069C1",
        },
        symbol: "none",
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#649ED6" },
            { offset: 1, color: "#FFFFFF" },
          ]),
        },
      },
    ],
  };
  myChart.setOption(option);
  myChart1.setOption(option1);
}
onMounted(() => {
  a();
  b();
  c();
  d();
  e();
  f();
  g();
  h();
  i();
  initChart();
});
</script>